<template>
<div class="wrapper">
    <el-tabs type="border-card" v-model="active" class="m-b">
        <el-tab-pane :label="'缺陷SAB'" :name="'缺陷SAB'">
            <el-row :gutter="20" v-if="active=='缺陷SAB'">
                <el-col :span="12">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>缺陷SAB统计</span>
                        </div>
                        <el-row>
                            <ve-histogram :data="chartSABData" :settings="chartSABSettings" :data-zoom="dataZoom">
                                <div class="data-empty" v-if="!isDisplay(chartSABData.rows)">没有数据😂</div>
                            </ve-histogram>
                        </el-row>      
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>缺陷SAB占比</span>
                        </div>
                        <el-row>
                            <ve-pie :data="chartSABData">
                                <div class="data-empty" v-if="!isDisplay(chartSABData.rows)">没有数据😂</div>
                            </ve-pie>  
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'缺陷流出/检出率'" :name="'缺陷流出/检出率'">
            <el-row :gutter="20" v-if="active=='缺陷流出/检出率'">
                <el-col :span="12">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>缺陷流出/检出率(研发阶段)</span>
                        </div>
                        <el-row>
                             <ve-pie :data="chartDevData">
                                <div class="data-empty" v-if="!isDisplay(chartDevData.rows)">没有数据😂</div>
                            </ve-pie> 
                        </el-row>      
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>缺陷流出/检出率(交付阶段)</span>
                        </div>
                        <el-row>
                            <ve-pie :data="chartDeliveryData">
                                <div class="data-empty" v-if="!isDisplay(chartDeliveryData.rows)">没有数据😂</div>
                            </ve-pie>  
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'个人Bug统计'" :name="'个人Bug统计'">
            <el-row :gutter="20" v-if="active=='个人Bug统计'">
                <el-col :span="24">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>个人缺陷统计</span>
                        </div>
                        <el-row>
                            <ve-bar :data="chartPersonalData" :settings="chartPersonalSetting">
                                <div class="data-empty" v-if="!isDisplay(chartPersonalData.rows)">没有数据😂</div>
                            </ve-bar>
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'缺陷密度'" :name="'缺陷密度'">
            <el-row :gutter="20" v-if="active=='缺陷密度'">
                <el-col :span="24">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>缺陷密度</span>
                        </div>
                        <el-row>
                            <ve-line :data="chartDefectDensityData" :settings="chartDefectDensitySetting">
                                <div class="data-empty" v-if="!isDisplay(chartDefectDensityData.rows)">没有数据😂</div>
                            </ve-line> 
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { getHeader } from '@/app.config'

export default {
    computed: {
        ...mapState({
            filters: state => state.filters
        })
    },
    // props: {
    //     filters: Object
    // },
    data() {
        return {
            active: '缺陷SAB',
            dataZoom: [
                {
                    type: 'slider',
                    start: 0,
                    end: 100
                }
            ],
            chartSABSettings: {
                metrics: ['count'],
                dimension: ['severity'],
            },
            chartSABData: {
                columns: ['severity', 'count'],
                rows: []
            },
            chartDevData: {
                columns: ['stage', 'count'],
                rows: []
            },
            chartDeliveryData: {
                columns: ['stage', 'count'],
                rows: []
            },
            chartPersonalData: {
                columns: ['b_assigned_to', 'b_number__count'],
                rows: []
            },
            chartPersonalSetting: {
                metrics: ['b_number__count'],
                dataOrder: {
                    label: 'b_number__count',
                    order: 'desc'
                },
                labelMap: {
                    b_number__count: '缺陷总数(个)'
                }
            },
            chartDefectDensityData: {
                columns: ['date', 'density'],
                rows: []
            },
            chartDefectDensitySetting: {
                labelMap: {
                    'density': '缺陷密度'
                },
            }
        
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
            },
            deep: true,
        },
    },
    methods: {
        getBugSABDaily(project, time) { // , version, component   projbugsabdaily
            var source = '/api/qa/projbugsab?projectId=';
            source = source+project+'&time='+time;
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.status == 200) {
                            if (response.data.code == 200) {
                                this.chartSABData.rows = response.data.data;
                            }
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getInOutFlowBug: function(project) { // projinoutflowbug
            var source = '/api/qa/projbuginoutflow?projectId=';
            source = source+project;
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.chartDevData.rows = response.data.develop;
                            this.chartDeliveryData.rows = response.data.delivery;
                        } 
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getPersonalBug: function(project, time) {
            var source = '/api/qa/projbugpersonal?projectId=';
            source = source+project+'&time='+time;
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.chartPersonalData.rows = response.data.personalbug;
                        } 
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getData() {
            let time = this.filters.time
            if (time == null || typeof(time) == "undefined") {
                time = ''
            }
            this.getBugSABDaily(this.filters.projectId, time)
            this.getInOutFlowBug(this.filters.projectId)
            this.getPersonalBug(this.filters.projectId, time)
        },
        isDisplay(data) {
            if (data && data.length != 0) {
                return true;
            } else {
                return false;
            }
        }
        
    },
    created: function() {
        // this.project_id = this.$route.params.pmsProjectId;
    },
    mounted: function() {
        this.getData();
    }
}
</script>
<style scoped>
    .wrapper{
        margin-bottom: 25px;
    }
    .data-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    color: #888;
    font-size: 14px;
    }
</style>